<template>
	<view class="order-check-page">
		<image class="topBg" :src="orderImgUrl+'security-check-bg.png'"></image>

		<view class="p-list" v-for="(item,index) in list" :key="index">
			<view class="p-l-item">
				<text style="font-weight: 800;font-size: 30rpx;color: #000000;">{{index+1}}.{{item.name}}: </text>   <text v-for="cItem in item.list">{{cItem.name}}?</text>
				<view class="p-btn c-flex jc-between">
					<view :class="item.pass ===true?'normal':''">合格</view>
					<view :class="item.pass ===false?'error':''">异常</view>
				</view>
				<textarea v-if="item.pass ===false" class="remarks" disabled=""
					placeholder-style="color:#8B959F;font-size: 28rpx;" v-model="item.reason"
					placeholder="备注异常原因…"></textarea>
			</view>

		</view>
		<view class="title-con c-flex jc-between c-item-center" style="margin: 15px 15px 15px;">
			<view class="c-flex jc-start c-item-center">
				<view class="d_icon"></view>
				<view class="title-1"><text>签名记录</text></view>
			</view>
		
		</view>
		<view class="p-list">
			<view class="p-l-sign">
				
				<view class="p-content">
					<view class="p-c-item  c-flex jc-between">
						<text>用户签名：</text>
						<view class="sign">
							<image :src="signUrl"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="title-con c-flex jc-between c-item-center" style="margin: 15px 15px 15px;">
			<view class="c-flex jc-start c-item-center">
				<view class="d_icon"></view>
				<view class="title-1"><text>拍照记录</text></view>
			</view>
		
		</view>
		<view class="phone_panel c-flex c-flex-wrap">
			<view class="view_phone" v-for="(item,index) in sceneImgList">
				
				<image :src="item" @tap.stop='previewFile(index,sceneImgList)'></image>
			</view>
			
		</view>


	</view>
</template>

<script>
	import {
		toast
	} from '@/utils/utils.js';
	export default {
		data() {
			return {
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/',
				orderImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/order/',
				commonUrl: this.$API.IMG_URL + '/common/',
				userId: null,
				list: [],
				signUrl: '',
				sceneImgList:[],
				checkType:null
				
			};
		},
		
		onLoad(options) {
			
			const data = JSON.parse(options.item)
			console.log(data)
			//const checkType = data.userType;
			this.userId = data.id;
			this.signUrl = data.sign;
			this.sceneImgList= JSON.parse(options.picArr)
			if(options.type==='order'){
				
				if(data.lpgUserType===0){
					this.checkType = 21
				}else if(data.lpgUserType===1){
					this.checkType = 22
				}else if(data.lpgUserType===2){
					this.checkType = 23
				}
				
			}else{
				
				if(data.userType===0){
					this.checkType = 21
				}else if(data.userType===1){
					this.checkType = 22
				}else if(data.userType===2){
					this.checkType = 23
				}
				
			}
			this.initData(options.type)
			uni.setNavigationBarColor({
				backgroundColor: '#f9ead5',
				frontColor: '#000000'
			});

			
		},

		methods: {
			previewFile(index, imgArr) {
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgArr, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop: true,
					indicator: 'default'
				});
			},
			checkYearDetail(arr) {
				this.$API.liquefiedGasRoomYearCheckDetail({
					id: this.userId
				}).then(res => {
					const result = arr.map((obj, index) => {
						return {
							...obj,
							...res.list[index]
						}

					});

					this.list = result;

				}).catch(() => {
					//联网失败, 结束加载

				});
			},
			checkOrderDetail(arr) {
				this.$API.liquefiedGasRoomOrderCheckDetail({
					id: this.userId
				}).then(res => {
					const result = arr.map((obj, index) => {
						return {
							...obj,
							...res.list[index]
						}
			
					});
			
					this.list = result;
			
				}).catch(() => {
					//联网失败, 结束加载
			
				});
			},
			
			initData(type) {


				this.$API.liquefiedGasRoomYearCheackItem({inspectType:this.checkType}).then(res => {

					let arr = res.list; //追加新数据
					if(type ==='order'){
						this.checkOrderDetail(arr);
					}else{
						this.checkYearDetail(arr)
					}
					
					
				}).catch(() => {
					//联网失败, 结束加载

				});
			}


		}
	}
</script>
<style lang="scss" scoped>
	.order-check-page {
		position: relative;
		background-image: linear-gradient(rgba(249, 195, 115, .3) 0%, #F9F9F9 100%);
		height: 100%;

		.topBg {
			width: 676rpx;
			height: 192rpx;
			margin-top: 20rpx;
			margin-left: 28rpx;
		}


		
		.d_icon {
			margin-right: 10rpx;
			width: 14rpx;
			height: 32rpx;
			background: linear-gradient(180deg, #F18858 0%, #E86547 100%);
			transform: skewX(-12deg)
		}
		
		.p-l-item {
			background: #FFFFFF;
			border-radius: 18rpx;
			padding: 35rpx 28rpx 35rpx;
			margin-bottom: 20rpx;
			position: relative;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}
		.p-l-sign {
			background: #FFFFFF;
			border-radius: 18rpx;
			padding: 15rpx 28rpx 2rpx;
			margin-bottom: 20rpx;
			position: relative;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}
		.p-list {
			margin: 0rpx 18rpx 0;


			.p-content {
				margin: 25rpx 0 33rpx;

				.p-c-item {

					margin-bottom: 16rpx;

					text {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 120rpx;
					}

				}

				.sign {
					width: 250rpx;
					height: 110rpx;
					background: #F9F9F9;
					border-radius: 16rpx;
					border: 2rpx solid #F5F5F5;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}

		}

		.remarks {
			margin: 20rpx auto;
			width: 602rpx;
			height: 126rpx;
			border-radius: 16rpx;
			border: 2rpx solid #DEDEDE;
			padding: 20rpx 22rpx;
		}

		.p-btn {
			margin-top: 35rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			text-align: center;
			color: #000;

			view {
				margin: 0 auto;
				width: 320rpx;
				height: 82rpx;
				background: #F6F5F8;
				border-radius: 16rpx;
				line-height: 82rpx;
			}

			.error {
				background: rgba(208, 2, 27, 0.1);
				color: #D0021B;
			}

			.normal {
				background: rgba(26, 186, 105, 0.1);
				color: #1ABA69;
			}
		}
		.phone_panel {
			margin-top: 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			gap: 42rpx;
			padding: 48rpx 34rpx;
			margin: 23rpx 18rpx 0;
			.view_phone {
				width: 300rpx;
				height: 200rpx;
				border-radius: 10rpx;
				position: relative;
		
				//margin:48rpx 34rpx;
				image {
		
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
		
				
			}
		
			
		}
	}
</style>